<template>
  <!-- 左边部分 -->
  <div class="listleft">
    <div class="handleul">
      <h2 class="tit">推荐</h2>
      <ul class="nav">
        <router-link to="" class="clackanniu" >
          <li class="navli" :class="navLi === -1 ? 'active' : ''" @click.prevent="handleck(-1)">
            <router-link to="/discover/artist">推荐歌手</router-link>
          </li>
        </router-link>
        <router-link to="" class="clackanniu" >
          <li class="navli" :class="navLi === 1 ? 'active' : ''" @click.prevent="handleck(1)">
            <router-link to="/discover/artist/singed">入驻歌手</router-link>
          </li>
        </router-link>
      </ul>
    </div>
    <div class="ulliBOx">
      <h2 class="tith">华语</h2>
      <ul class="nav">
        <router-link to="" class="clackanniu" >
          <li class="navLi" :class="navLi === 2 ? 'active' : ''" @click.prevent="handleck(2)">
            <router-link to="">华语男歌手</router-link>
          </li>
        </router-link>
        <router-link to="" class="clackanniu">
          <li class="navLi" :class="navLi === 3 ? 'active' : ''"  @click.prevent="handleck(3)">
            <router-link to="">华语女歌手</router-link>
          </li>
        </router-link>
        <router-link to="" class="clackanniu" >
          <li class="navLi" :class="navLi === 4 ? 'active' : ''" @click.prevent="handleck(4)">
            <router-link to="">华语组合/乐队</router-link>
          </li>
        </router-link>
      </ul>
    </div>
    <div class="ulliBOx">
      <h2 class="tith">欧美</h2>
      <ul class="nav">
        <router-link to="" class="clackanniu" >
          <li class="navLi" :class="navLi === 5 ? 'active' : ''" @click.prevent="handleck(5)">
            <router-link to="">欧美nan歌手</router-link>
          </li>
        </router-link>
        <router-link to="" class="clackanniu" >
          <li class="navLi" :class="navLi === 6 ? 'active' : ''" @click.prevent="handleck(6)">
            <router-link to="">欧美女歌手</router-link>
          </li>
        </router-link>
        <router-link to="" class="clackanniu" >
          <li class="navLi" :class="navLi === 7 ? 'active' : ''" @click.prevent="handleck(7)">
            <router-link to="">欧美组合/乐队</router-link>
          </li>
        </router-link>
      </ul>
    </div>
    <div class="ulliBOx">
      <h2 class="tith">日本</h2>
      <ul class="nav">
        <router-link to="" class="clackanniu" >
          <li class="navLi" :class="navLi === 8 ? 'active' : ''" @click.prevent="handleck(8)">
            <router-link to="">日本男歌手</router-link>
          </li>
        </router-link>
        <router-link to="" class="clackanniu" >
          <li class="navLi" :class="navLi === 9 ? 'active' : ''" @click.prevent="handleck(9)">
            <router-link to="">日本女歌手</router-link>
          </li>
        </router-link>
        <router-link to="" class="clackanniu" >
          <li class="navLi" :class="navLi === 10 ? 'active' : ''" @click.prevent="handleck(10)">
            <router-link to="">日本组合/乐队</router-link>
          </li>
        </router-link>
      </ul>
    </div>
    <div class="ulliBOx">
      <h2 class="tith">韩国</h2>
      <ul class="nav">
        <router-link to="" class="clackanniu" >
          <li class="navLi" :class="navLi === 11 ? 'active' : ''" @click.prevent="handleck(11)">
            <router-link to="">韩国男歌手</router-link>
          </li>
        </router-link>
        <router-link to="" class="clackanniu" >
          <li class="navLi" :class="navLi === 12 ? 'active' : ''" @click.prevent="handleck(12)">
            <router-link to="">韩国女歌手</router-link>
          </li>
        </router-link>
        <router-link to="" class="clackanniu" >
          <li class="navLi" :class="navLi === 13 ? 'active' : ''" @click.prevent="handleck(13)">
            <router-link to="">韩国组合/乐队</router-link>
          </li>
        </router-link>
      </ul>
    </div>
    <div class="ulliBOx">
      <h2 class="tith">其他</h2>
      <ul class="nav">
        <router-link to="" class="clackanniu" >
          <li class="navLi" :class="navLi === 14 ? 'active' : ''" @click.prevent="handleck(14)">
            <router-link to="">其他男歌手</router-link>
          </li>
        </router-link>
        <router-link to="" class="clackanniu" >
          <li class="navLi" :class="navLi === 15 ? 'active' : ''" @click.prevent="handleck(15)">
            <router-link to="">其他女歌手</router-link>
          </li>
        </router-link>
        <router-link to="" class="clackanniu" >
          <li class="navLi" :class="navLi === 16 ? 'active' : ''" @click.prevent="handleck(16)">
            <router-link to="">其他组合/乐队</router-link>
          </li>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
// import singed from '@/views/Artist/singed/index'
export default {
  name: 'Sort',
  data() {
    return {
      navLi: -1
    }
  },
  methods: {
    // 边框逻辑
    // 绑定到li身上
    handleck(index) {
      // console.log(index)
      this.navLi = index
      this.navli = index
    }
  }
}
</script>

<style lang="less">








</style>
